<template>
  <el-dialog title="开票记录详情" v-model="visible" width="65%">
    <div>
      <el-descriptions :column="4" border>
        <el-descriptions-item
          label="开票时间"
          :span="2"
          label-align="right"
          :width="200"
        >
          {{ detailInfo.createTime }}
        </el-descriptions-item>

        <el-descriptions-item
          label="开票状态"
          :span="2"
          label-align="right"
          :width="200"
        >
          <dict-tag
            :options="bus_approval_status"
            :value="detailInfo.approvalStatus"
          />
        </el-descriptions-item>
        <el-descriptions-item
          label="发票类型"
          :span="2"
          label-align="right"
          :width="200"
        >
          <dict-tag
            :options="bus_invoice_type"
            :value="detailInfo.invoiceType"
          />
        </el-descriptions-item>
        <el-descriptions-item
          label="开票项目"
          :span="2"
          label-align="right"
          :width="200"
        >
          <dict-tag
            :options="bus_invoice_item"
            :value="detailInfo.invoiceItem"
          />
        </el-descriptions-item>
        <el-descriptions-item
          label="开票抬头"
          :span="2"
          label-align="right"
          :width="200"
        >
          {{ detailInfo.invoiceTitle }}
        </el-descriptions-item>
        <el-descriptions-item
          label="纳税人识别号"
          :span="2"
          label-align="right"
          :width="200"
        >
          {{ detailInfo.invoiceTin }}
        </el-descriptions-item>
        <el-descriptions-item
          label="地址"
          :span="2"
          label-align="right"
          :width="200"
        >
          {{ detailInfo.invoiceAddress }}
        </el-descriptions-item>
        <el-descriptions-item
          label="地址"
          :span="2"
          label-align="right"
          :width="200"
        >
          {{ detailInfo.invoiceAddress }}
        </el-descriptions-item>
        <el-descriptions-item
          label="电话"
          :span="2"
          label-align="right"
          :width="200"
        >
          {{ detailInfo.invoicePhone }}
        </el-descriptions-item>
        <el-descriptions-item
          label="开户行"
          :span="2"
          label-align="right"
          :width="200"
        >
          {{ detailInfo.openingBank }}
        </el-descriptions-item>
        <el-descriptions-item
          label="账号"
          :span="2"
          label-align="right"
          :width="200"
        >
          {{ detailInfo.accountNumber }}
        </el-descriptions-item>
        <el-descriptions-item
          label="发票接收邮箱"
          :span="2"
          label-align="right"
          :width="200"
        >
          {{ detailInfo.invoiceEmail }}
        </el-descriptions-item>

        <el-descriptions-item
          label="收件人+手机号"
          :span="2"
          label-align="right"
          :width="200"
        >
          {{ detailInfo.recipientTelephone }}
        </el-descriptions-item>
        <el-descriptions-item
          label="收件人地址"
          :span="2"
          label-align="right"
          :width="200"
        >
          {{ detailInfo.recipientAddress }}
        </el-descriptions-item>
        <el-descriptions-item label="发票附件" :span="2" label-align="right">
          <div class="license-box">
            <el-image
              v-if="detailInfo.invoiceImg"
              :src="detailInfo.invoiceImg"
              fit="cover"
            />
            <div v-else class="license-placeholder" />
          </div>
        </el-descriptions-item>
        <el-descriptions-item
          label="审批备注"
          :span="2"
          label-align="right"
          :width="200"
        >
          {{ detailInfo.approvalRemark }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </el-dialog>
</template>
<script setup>
import { onMounted, ref } from "vue";
const { proxy } = getCurrentInstance();
import { getInvoiceLogDetail } from "@/api/invoice.js";

const { bus_invoice_type, bus_invoice_item, bus_approval_status } =
  proxy.useDict("bus_invoice_type", "bus_invoice_item", "bus_approval_status");
const props = defineProps({
  value: {
    type: Boolean,
    default: false,
  },
  id: {
    type: String,
    default: "",
  },
});

const emits = defineEmits(["update:value"]);

const visible = computed({
  get() {
    return props.value;
  },
  set(val) {
    emits("update:value", val);
  },
});
const detailInfo = ref({});
async function getDetail() {
  try {
    const res = await getInvoiceLogDetail(props.id);
    detailInfo.value = res.data;
  } catch (error) {}
}
onMounted(() => {
  getDetail();
});
</script>

<style lang="scss">
.license-box {
  padding: 8px 0;
  .license-placeholder {
    width: 120px;
    height: 120px;
    background: #f0f2f5;
    border: 1px solid #e5e7eb;
  }
}
</style>
